<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>

<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Set Apple icons for when prototype is saved to home screen -->
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57"
	href="touch-icons/apple-touch-icon-57x57.png">

<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">

<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>

</head>
<body>
	<form>
		<input type="text" placeholder="Full name"> <input
			type="search" placeholder="Search">
		<textarea rows="5"></textarea>
		<a class="button button-block">Choose existing</a>
	</form>
	<form>
		<div class="input-group">
			<input type="text" placeholder="Full name"> <input
				type="email" placeholder="Email"> <input type="text"
				placeholder="Username">
		</div>
	</form>
	<form>
		<div class="input-group">
			<div class="input-row">
				<label>Full name</label> <input type="text"
					placeholder="Mister Ratchet">
			</div>
			<div class="input-row">
				<label>Email</label> <input type="email"
					placeholder="ratchetframework@gmail.com">
			</div>
			<div class="input-row">
				<label>Username</label> <input type="text" placeholder="goRatchet">
			</div>
		</div>
	</form>
</body>
</html>